<template>
  <div class="com-full">
    <Card :name="name" :imgType="1">
      <template #body>
        <div class="frame com-flex-1 com-full com-flex-r com-center">
          <div class="com-flex-1 com-full com-flex-c">
            <div class="echart-frame com-flex-r">
              <PieChart />
            </div>
          </div>
          <div class="table">
            <Table :column="column" :row="row" title="工单数据" />
          </div>
        </div>
      </template>
    </Card>
  </div>
</template>

<script setup>
import Card from "@/components/Card/Card.vue";
import { computed, onMounted, ref } from "vue";
import Table from "@/components/Table/Table.vue";
import { getActivePinia } from "pinia";
import PieChart from "./components/PieChart/PieChart.vue";
import api from "@/api";

const name = "工单统计";

const tab = ref([
  {
    id: 1,
    name: "告警来源",
  },
  {
    id: 2,
    name: "告警等级",
  },
]);
const change = ref(0);

//tab点击触发
const styles = computed(() => {
  if (change.value === 0) {
    return {
      backgroundImage: `url(imgs/34.png)`,
    };
  } else {
    return {
      backgroundImage: `url(imgs/44.png)`,
    };
  }
});

//tab切换
const tabClick = (index) => {
  change.value = index;
  console.log("object,", index);
};

//判断等级
const judgeGrade = {
  0: "#81B1F4",
  1: "#D0A14C",
  2: "#FFD564",
  默认: "#fff",
};

const column = ref([
  { label: "工单流水号", props: "sheetNum", dataType: "Sheet", width: 32 },
  {
    label: "工单状态",
    props: "stateName",
    width: 17,
    dataType: "Grade",
    Grade_type: (data, row) => {
      return {
        backgroundColor: judgeGrade[row.sheetState] || judgeGrade["默认"], // 使用row.dev_status作为键从statusColors对象中获取颜色，如果没有找到则使用默认颜色
      };
    },
  },
  { label: "工单创建人", props: "sendUserName", width: 15 },
  { label: "工单详情", props: "alarmTitle", width: 19 },
  { label: "创建时间", props: "sendDate", dataType: "Time", width: 27 },
]);

const row = ref();

const dataInit = async () => {
  const { data } = await api.workOrderList();
  row.value = data.map((item) => ({
    ...item,
    stateName: { 1: "归档", 2: "作废", 0: "运营中", 10: "强制归档" }[item.sheetState],
  }));
};
onMounted(() => {
  dataInit();
});
</script>

<style lang="scss" scoped>
.frame {
  margin: 25px 0 0 23px;

  .tab {
    width: 400px;
    height: 50px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: all;

    .name {
      cursor: pointer;
      font-size: 21px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #b5c4d0;
      letter-spacing: 2.4px;
    }

    .active_name {
      font-family: PingFang SC, PingFang SC-Semibold;
      color: #ffffff;
    }
  }

  .echart-frame {
    margin: 20px 0 0 0;
    justify-content: space-between;
    width: 96%;
    height: 60%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 75%;

    .echart {
      width: 37%;
      height: 96%;
    }

    .info {
      justify-content: space-evenly;
      width: 46%;
      height: 100%;

      .point {
        width: 12px;
        height: 12px;
        border-radius: 50%;
      }

      .name {
        margin-left: 13px;
        font-size: 20px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #b5c4d0;
        letter-spacing: 1.5px;
      }

      .number {
        margin-left: 80px;
        font-size: 32px;
        font-family: DIN Alternate, DIN Alternate-Bold;
        font-weight: 700;
        text-align: left;
        color: #0080cc;
        letter-spacing: 2.4px;
      }
    }
  }

  .table {
    width: 53%;
    height: 100%;
  }
}
</style>
